<template>
  <div class="contractItem">
    <div class="listContent bor_b">
      <!-- 第一行 -->
      <!-- detail界面的委托或者历史 -->
      <template v-if="type == 'entrust' || type == 'history'">
        <van-row gutter="20" class="lists c666">
          <van-col span="8" class="markers">
            <div v-show="type == 'entrust'">{{ list.buyNum }}</div>
            <div v-show="type == 'history'" :class="currentHistoryType == 2 ? '' : 'bold_num size14'">
              {{ list.buyNum }}
            </div>
            <!-- 撤销的 -->
            <div v-if="currentHistoryType == 2" class="mar_t_6">{{ t('detail.wtsl') }}</div>
            <div v-else class="mar_t_6">{{ type == 'entrust' ? t('detail.wtsl') : t('detail.cjsl') }}</div>
          </van-col>
          <van-col span="8" class="center_text">
            <!-- xiabiao 为 0 是其他的，因为默认0 如果1 起步 说明 已成交的 -->
            <!-- 1.其他 -->
            <div v-show="type == 'entrust'">{{ list.price }}</div>
            <!-- 撤销的 -->
            <div v-if="currentHistoryType == 2" class="mar_t_6">{{ t('detail.wtjg') }}</div>
            <div v-else class="mar_t_6">{{ type == 'entrust' ? t('detail.wtjg') : t('detail.cjjg') }}</div>
          </van-col>
          <van-col span="8" class="right_text markers">
            <div :class="type == 'history' ? 'bold_num size14' : ''">
                {{ list.margin }}
            </div>
            <div class="mar_t_6">{{ t('detail.bzj') }}</div>
          </van-col>
        </van-row>

        <van-row gutter="20" class="lists second c666">
          <van-col span="8" class="markers">
            <div :class="type == 'history' ? 'bold_num size14' : ''">
                {{ list.leverNum }}
            </div>
            <div class="mar_t_6">{{ t('detail.gg') }}</div>
          </van-col>
          <van-col span="8" class="center_text markers">
            <div :class="type == 'history' ? 'bold_num size14' : ''">
                {{ list.pairsName }}
            </div>
            <div class="mar_t_6">{{ t('detail.goods') }}</div>
          </van-col>
          <van-col span="8" class="right_text markers">
            <div :class="type == 'history' ? 'bold_num size14' : ''">
                {{ list.orderType == 1 ? t('detail.sj') : t('detail.xianjia') }}
            </div>
            <div class="mar_t_6">{{ t('detail.fangshi') }}</div>
          </van-col>
        </van-row>
      </template>

      <!-- 第二行 -->
      <div class="lists c666">
        <!-- 当前委托 交易页面 -->
        <div class="tableBox" v-if="type == 'entrust'">
          <div class="items">
            <span>{{ t('detail.profit') }}</span>
            <span class="markers">{{ list.stopProfit }}</span>
          </div>
          <div class="items">
            <span>{{ t('detail.loss') }}</span>
            <span class="markers">{{ list.stopLoss }}</span>
          </div>
          <div class="items">
            <span>{{ t('detail.shijian') }}</span>
            <span class="markers">{{ update(list.createTime) }}</span>
          </div>
        </div>
        <!-- 历史页面  -->
        <div class="tableBox" v-else-if="type == 'history'">
          <div class="items">
            <span>{{ t('detail.Fees') }}</span>
            <span v-if="currentHistoryType == 2" class="markers">{{ 0 }}</span>
            <span v-else class="markers">{{ list.buyFee }}</span>
          </div>
          <div class="items">
            <span>{{ t('detail.fangshi') }}</span>
            <!-- 第二行 -->
            <span v-if="xiabiao % 2 == 0" class="markers">{{ list.priceType == 'CUSTOM_PRICE' ? t('detail.xianjia') :
              t('detail.sj') }}</span>
            <!-- 第一行 -->
            <span v-else class="markers">{{ $t('detail.sj') }}</span>
          </div>
          <div class="items " style="padding-right:0">
            <span>{{ t('detail.chengjiaoshijian') }}</span>
            <span v-if="xiabiao % 2 == 0" class="markers">{{ list.createTime }}</span>
            <span v-else class="markers">{{ list.updateTime }}</span>
          </div>
        </div>
        <!-- 交易页面持仓 -->
        <div class="tableBox" v-else>
          <div class="items">
            <span>{{ t('detail.goods') }}</span>
            <span class="markers">{{ list.pairsName }}</span>
          </div>
          <div class="items">
            <span>{{ t('detail.shoushu') }}</span>
            <span class="markers">{{ list.buyNum }}</span>
          </div>
          <div class="items">
            <span>{{ t('detail.zybzj') }}</span>
            <span class="markers">{{ list.margin }}</span>
          </div>
          <div class="items">
            <span>{{ t('detail.zyjg') }}</span>
            <span class="markers">{{ list.stopProfit }}</span>
          </div>
          <div class="items">
            <span>{{ t('detail.zsjg') }}</span>
            <span class="markers">{{ list.stopLoss }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 不是历史交易页面 并且不是撤单 （交易页面不是撤单的交易 持仓 委托） -->
    <template v-if="type != 'history' && subType != 'revoke'">
      <!-- 普通委托 交易页面 -->
      <div v-if="type == 'entrust'" class="tabBox1">
        <div class="items">
          <img src="../../assets/detail/transaction_4.png" alt class="imgs" />
        </div>
        <div class="btn" @click="chedan(list)">
          {{ t('detail.chedan') }}
        </div>
      </div>
      <!-- 持仓列表 -->
      <div v-else>
        <div v-if="currentHistoryType == 3" class="tabBox2">
        </div>
        <div v-else class="tabBox2 c444">
          <div class="items" @click="pingcang(list)">
            <img src="../../assets/detail/transaction_1.png" alt class="imgs" />
            <p class="name">{{ t('detail.pc') }}</p>
          </div>
          <!-- <div class="items" @click="zhingying(list)">
            <img src="../../assets/detail/transaction_2.png" alt class="imgs" />
            <p class="name">{{ t('detail.zhiyin') }}</p>
          </div>
          <div class="items" @click="zhisun(list)">
            <img src="../../assets/detail/transaction_3.png" alt class="imgs" />
            <p class="name">{{ t('detail.zhishun') }}</p>
          </div> -->
        </div>
      </div>
    </template>
    <div class="darkLine"></div>
  </div>
</template>
<script setup>

import { ref, reactive, watch } from 'vue'
import useLanguage from '@/hooks/useLanguage';
import { showNotify } from 'vant';
const { t } = useLanguage()

const props = defineProps({
  ensure: {
    type: Number,  //保证金率
    default: 0
  },
  xiabiao: {
    type: Number,  // 下标
    default: 0
  },

  list: {
    type: Object,
    default: {}
  },
  type: {
    type: String, //entrust委托,history历史
    default: ""
  },
  subType: {
    type: String, //'contractType'全部类型，entrust委托，revoke撤销
    default: ""
  },
  currentHistoryType: {  // 1 已成交
    type: String,
    default: ""
  }
})
const emit = defineEmits(['res'])

function pingcang(list) {
  emit('res', list, 'MATCH')
}

const iszhiying = ref(true)
const price = ref('')
const show = ref(false)
function zhingying(list) {
  iszhiying.value = true
  price.value = ''
  show.value = true
}

function zhisun() {
  iszhiying.value = false
  price.value = ''
  show.value = true
}

function close() {
  show.value = false;
}

// 撤单
function chedan(item) {
  emit('res', item, 'CHEDAN')

}

const nowCoinInfo = reactive({
  volume: 0,
  nowPrice: 0,
  lowPrice: 0,
  chPrice: 0,
  higPrice: 0,
  updown: 0,
  open: 0,
})

function ok(v) {
  const nowPrice = nowCoinInfo.nowPrice;
  if (price.value == '' || price.value == 0) {
    showNotify({
      message: t('detail.qsrjg'),
      type: 'error',
    })
    return
  }
  if (v) {
    // 止盈

  }
}

watch(price, (val) => {
  val = String(val)
  if (val.indexOf('.') != -1) {
    const len = val.split('.').length
    if (len > 4) {
      price.value = val.substring(0, val.length - 1)
    }
  }
})

const update = (date) => {
  const time = new Date(date).getTime()
  const second = new Date(date).getSeconds()
  const minute = new Date(date).getMinutes()
  const hour = new Date(date).getHours()
  const curdate = new Date(date).getDate()
  const mounth = new Date(date).getMonth() + 1
  const year = new Date(date).getFullYear()



  const newDate = `${year} ${mounth < 10 ? '0' + mounth : mounth}-${curdate < 10 ? '0' + curdate : curdate} ${hour < 10 ? '0' + hour : hour}:${minute < 10 ? '0' + minute : minute}:${second < 10 ? '0' + second : second}`
  return newDate
}
</script>

<style lang="less">
.contractItem {
  .van-cell {
    padding-left: 0;
    padding-right: 0;
    font-size: 11px;
  }

  .van-cell__title {
    color: #666666;
  }

  .van-cell__value {
    color: #222222;
  }
}
</style>
<style lang="less" scoped>
.contractItem {
  border-bottom: 1px solid #969696;
  margin-bottom: 20px;

  .titleBox {
    align-items: center;
    border-bottom: 1px solid rgba(227, 227, 227, 0.2);
    font-size: 13px;
    padding: 15px 0;

    .green_text {
      font-weight: 500;
      font-size: 16px;
    }

    .share {
      width: 21px;
      height: 21px;
    }
  }

  .listContent {
    padding: 12px 0;
    border-bottom: 1px solid rgba(227, 227, 227, 0.2);

    .lists {
      font-size: 11px;
      position: relative;
      text-align: center;

      .columLines {
        position: absolute;
        width: 1px;
        top: 23px;
        bottom: 5px;
        left: 50%;
        background: rgba(227, 227, 227, 0.2);
      }
    }

    .second {
      margin-top: 10px;
    }

    .tableBox {
      padding: 12px 0 5px;
      display: grid;
      gap: 10px;
      grid-template-columns: repeat(3, minmax(0, 1fr));

      .items {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .markers {
          color: #222222;
        }
      }
    }
  }

  .tabBox {
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    font-size: 13px;

    .items {
      display: flex;
      width: 33.3%;
      justify-content: center;

      .imgs {
        width: 21px;
        height: 21px;
        margin-right: 5px;
      }
    }
  }

  .tabBox1 {
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: #444444;
    font-size: 13px;

    .btn {
      width: 60px;
      height: 25px;
      border: 1px solid #fbc400;
      border-radius: 3px;
      text-align: center;
      line-height: 25px;
      color: #0a76d4
    }

    .items {
      display: flex;
      justify-content: center;
      align-items: center;

      .imgs {
        width: 21px;
        height: 21px;
        margin-right: 5px;
      }
    }
  }

  .tabBox2 {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    .items {
      display: flex;
      justify-content: center;
      align-items: center;

      .imgs {
        width: 21px;
        height: 21px;
        margin-right: 5px;
      }
    }
  }
}
</style>
